<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <table border="1px" width="70%" height="350px" align="center" cellspacing="0">
            <tr>
                <th>编号</th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in items" align="center">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>{{item.price}}</td>
                <td><button :disabled="item.count === 1" @click="sub(index)">-</button>{{item.count}}<button @click="plus(index)">+</button></td>
                <td><button @click="delete1(index)">移除</button></td>
            </tr>
            <tr height="50px" align="center">
                <td colspan="6">
                    <h2>总价格：￥{{sum1}}</h2>
                </td>
            </tr>
        </table>


    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            items: [{
                name: "《java编程思想》",
                date: "2020-9",
                price: "￥98.00",
                count: 1
            }, {
                name: "《数据分析与数据原理》",
                date: "2019-2",
                price: "￥39.00",
                count: 1
            }, {
                name: "《Hadoop权威指南》",
                date: "2019-10",
                price: "￥59.00",
                count: 1
            }, {
                name: "《代码大全》",
                date: "2018-8",
                price: "￥128.00",
                count: 1
            }]
        },
        methods: {
            delete1: function(i) {
                console.log(i);
                if (confirm("您是否删除")) {
                    //删除一行元素 splice（index，num）
                    this.items.splice(i, 1);
                    // console.log(this.items);
                }
            },
            plus: function(i) {
                this.items[i].count++;
                console.log("++");
            },
            sub: function(i) {
                this.items[i].count--;
                console.log("--");
            }
        },
        computed: {
            sum1() {
                var sum2 = 0;
                // sum1 = this.items.reduce((prevalue, item) => (prevalue + parseFloat(item.price.slice(1)) * item.countaaaaaaaaaay), 0);
                for (var i of this.items) {
                    sum2 += (parseFloat(i.price.slice(1) * i.count));
                }
                return sum2;
            }
        }
    })
</script>

</html>